.wanlshop img {
    height: 100%;
    width: 100%;
}

/* 轮播组件 */
.wanlshop .banner {
    position: relative;
}

.wanlshop .banner .indicator {
    position: absolute;
    width: 100%;
    bottom: 10px;
}

.wanlshop .banner .indicator .item {
    display: flex;
    justify-content: center;
}

.wanlshop .banner .indicator .item span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 8px 2px;
    background-color: #eee;
}

.wanlshop .banner .indicator .item span:first-child {
    background-color: orangered;
}

/* 广告轮播组件 */
.wanlshop .advertBanner {
    position: relative;
}

.wanlshop .advertBanner .indicator {
    position: absolute;
    width: 100%;
    bottom: 10px;
}

.wanlshop .advertBanner .indicator .item {
    display: flex;
    justify-content: center;
}

.wanlshop .advertBanner .indicator .item span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 8px 2px;
    background-color: #eee;
}

.wanlshop .advertBanner .indicator .item span:first-child {
    background-color: orangered;
}

/* 视频组件 */
.wanlshop .video {
    position: relative;
}

.wanlshop .video .play {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.wanlshop .video .play .wlIcon {
    padding-top: 11%;
    font-size: 50px;
    color: #ffffff;
}

/* 菜单组件 */
.wanlshop .menu .grid .item .picicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5000px;
    border: 1px solid rgba(255, 255, 255, .3);
}

/* 公告栏 */
.wanlshop .notice {
}

/* 文章组件 */
.wanlshop .article .item {
    display: flex;
    margin-bottom: 10px;
}

.wanlshop .article .item:last-of-type {
    margin-bottom: 0;
}

.wanlshop .article .image {
    width: 100px;
    height: 80px;
    margin-right: 10px;
}

.wanlshop .article .image img {
}

.wanlshop .article .article-content {
    width: calc(100% - 110px);
    padding: 5px 0;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
}

.wanlshop .article .article-content .title {
    width: 100%;
    font-size: 14px;
}

.wanlshop .article .article-content .operate {
    width: 100%;
    color: #a8a8a8;
}

.wanlshop .article .article-content .operate span {
    margin-right: 5px;
}

/* 头条组件 */
.wanlshop .headlines {
    display: flex;
    align-items: center;
}

.wanlshop .headlines .wlIcon {
    font-size: 30px;
    color: #924849;
}

.wanlshop .headlines .swiper {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 9px 9px 0;
    overflow: hidden;
}

.wanlshop .headlines .swiper .pic {
    background-color: #f5f5f5;
    height: 50px;
    width: 50px;
}

.wanlshop .headlines .swiper .pic img {
    height: 50px;
    width: 50px;
}

/* 搜索栏 */
.wanlshop .search {
}

/* 活动橱窗-分类橱窗 */
.wanlshop .category .cu-list {
    text-align: left;
}

.wanlshop .category .cu-list .cu-item {
    padding: 12.5px;
    overflow: hidden;
}

.wanlshop .category .cu-list .cu-item .name .text-lg {
    font-size: 15.5px;
}

.wanlshop .category .cu-list .cu-item .cu-tag {
    left: 0;
    top: -2px;
    margin-left: 5px;
}

.wanlshop .category .cu-list .cu-item .cu-tag [class*=wlIcon] {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.wanlshop .category .cu-list .cu-item .cu-tag.sm {
    padding-left: 0;
}

.wanlshop .category .cu-list .cu-item .goods {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wanlshop .category .cu-list .cu-item .goods > div {
    height: 65px;
}

.wanlshop .category .cu-list .cu-item .goods > div + div {
    margin-left: 12.5px;
}

/* 类目标题 */
.wanlshop .categoryTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 猜你喜欢-商品组件 */
.wanlshop .product {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.wanlshop .product .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: white;
    border-radius: 9px;
    overflow: hidden;
}

.wanlshop .product .item .item_pic {
    height: 175px;
    width: 100%;
    overflow: hidden;
}

.wanlshop .product .item .item_pic img {
    height: 175px;
    width: 100%;
}

.wanlshop .product .item .item_list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wanlshop .product .item .label {
    margin: 2px 0;
}

.wanlshop .product .item .label span {
    margin: 0 7.5px;
}

.wanlshop .product .item .label span:first-child {
    margin-left: 0;
}

.wanlshop .product .item .block {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 一列 */
.wanlshop .product.col-1-10 {
    padding-top: 5px;
}

.wanlshop .product.col-1-10 .item {
    margin-bottom: 5px;
}

.wanlshop .product.col-1-10 .item .item_pic {
    height: 150px;
    width: 200px;
}

.wanlshop .product.col-1-10 .item .item_pic img {
    height: 150px;
}

.wanlshop .product.col-1-15 {
    padding-top: 7.5px;
}

.wanlshop .product.col-1-15 .item {
    margin-bottom: 7.5px;
}

.wanlshop .product.col-1-20 {
    padding-top: 10px;
}

.wanlshop .product.col-1-20 .item {
    margin-bottom: 10px;
}

.wanlshop .product.col-1-25 {
    padding-top: 12.5px;
}

.wanlshop .product.col-1-25 .item {
    margin-bottom: 12.5px;
}

.wanlshop .product.col-1-30 {
    padding-top: 15px;
}

.wanlshop .product.col-1-30 .item {
    margin-bottom: 15px;
}

/* 二列 */
.wanlshop .product.col-2-10 {
    padding: 5px 5px 0 5px;
}

.wanlshop .product.col-2-10 .item {
    width: calc((100% - 5px) / 2);
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-2-10-0 .item {
    width: calc((100% - 5px) / 2);
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-2-15 {
    padding: 7.5px 7.5px 0 7.5px;
}

.wanlshop .product.col-2-15 .item {
    width: calc((100% - 7.5px) / 2);
    margin-bottom: 7.5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-2-15-0 .item {
    width: calc((100% - 7.5px) / 2);
    margin-bottom: 7.5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-2-20 {
    padding: 10px 10px 0 10px;
}

.wanlshop .product.col-2-20 .item {
    width: calc((100% - 10px) / 2);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.wanlshop .product.col-2-20-0 .item {
    width: calc((100% - 10px) / 2);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.wanlshop .product.col-2-25 {
    padding: 12.5px 12.5px 0 12.5px;
}

.wanlshop .product.col-2-25 .item {
    width: calc((100% - 12.5px) / 2);
    margin-bottom: 12.5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-2-25-0 .item {
    width: calc((100% - 12.5px) / 2);
    margin-bottom: 12.5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-2-30 {
    padding: 15px 15px 0 15px;
}

.wanlshop .product.col-2-30 .item {
    width: calc((100% - 15px) / 2);
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.wanlshop .product.col-2-30-0 .item {
    width: calc((100% - 15px) / 2);
    margin-bottom: 15px;
    flex-wrap: wrap;
}

/* 三列 */
.wanlshop .product.col-3-10 {
    padding: 5px 5px 0 5px;
}

.wanlshop .product.col-3-10 .item {
    width: calc((100% - 10px) / 3);
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-3-10-0 .item {
    width: calc((100% - 10px) / 3);
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-3-15 {
    padding: 7.5px 7.5px 0 7.5px;
}

.wanlshop .product.col-3-15 .item {
    width: calc((100% - 15px) / 3);
    margin-bottom: 7.5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-3-15-0 .item {
    width: calc((100% - 15px) / 3);
    margin-bottom: 7.5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-3-20 {
    padding: 10px 10px 0 10px;
}

.wanlshop .product.col-3-20 .item {
    width: calc((100% - 20px) / 3);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.wanlshop .product.col-3-20-0 .item {
    width: calc((100% - 20px) / 3);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.wanlshop .product.col-3-25 {
    padding: 12.5px 12.5px 0 12.5px;
}

.wanlshop .product.col-3-25 .item {
    width: calc((100% - 25px) / 3);
    margin-bottom: 12.5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-3-25-0 .item {
    width: calc((100% - 25px) / 3);
    margin-bottom: 12.5px;
    flex-wrap: wrap;
}

.wanlshop .product.col-3-30 {
    padding: 15px 15px 0 15px;
}

.wanlshop .product.col-3-30 .item {
    width: calc((100% - 30px) / 3);
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.wanlshop .product.col-3-30-0 .item {
    width: calc((100% - 30px) / 3);
    margin-bottom: 15px;
    flex-wrap: wrap;
}

/* 砍价组件 */
.wanlshop .bargain {
}

/* 秒杀组件 */
.wanlshop .seckill {
}

/* 空白行 */
.wanlshop .empty {
}

/* 分隔符 */
.wanlshop .division {
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}

.wanlshop .division .line {
    position: absolute;
    transform: scaleY(.5);
}

.wanlshop .division .linetext {
    position: relative;
    text-align: center;
    z-index: 1;
}

.round {
    border-radius: 5000px;
}

.radius {
    border-radius: 4px;
}

/* grid布局 */
.grid {
    display: flex;
    flex-wrap: wrap;
}

.grid.grid-square {
    overflow: hidden;
}

.grid.grid-square .cu-tag {
    position: absolute;
    right: 0;
    top: 0;
    border-bottom-left-radius: 3px;
    padding: 3px 6px;
    height: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.grid.grid-square > div > i[class*="wlIcon-"] {
    font-size: 26px;
    position: absolute;
    color: #8799a3;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.grid.grid-square > div {
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.grid.grid-square > div.bg-img img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.grid.col-1.grid-square > div {
    padding-bottom: 100%;
    height: 0;
    margin-right: 0;
}

.grid.col-2.grid-square > div {
    padding-bottom: calc((100% - 10px) / 2);
    height: 0;
    width: calc((100% - 10px) / 2);
}

.grid.col-3.grid-square > div {
    padding-bottom: calc((100% - 20px) / 3);
    height: 0;
    width: calc((100% - 20px) / 3);
}

.grid.col-4.grid-square > div {
    padding-bottom: calc((100% - 30px) / 4);
    height: 0;
    width: calc((100% - 30px) / 4);
}

.grid.col-5.grid-square > div {
    padding-bottom: calc((100% - 40px) / 5);
    height: 0;
    width: calc((100% - 40px) / 5);
}

.grid.col-2.grid-square > div:nth-child(2n), .grid.col-3.grid-square > div:nth-child(3n), .grid.col-4.grid-square > div:nth-child(4n), .grid.col-5.grid-square > div:nth-child(5n) {
    margin-right: 0;
}

.grid.col-1 > div {
    width: 100%;
}

.grid.col-2 > div {
    width: 50%;
}

.grid.col-3 > div {
    width: 33.33%;
}

.grid.col-4 > div {
    width: 25%;
}

.grid.col-5 > div {
    width: 20%;
}

/*  -- 内外边距 -- */
.margin-0 {
    margin: 0;
}

.margin-xs {
    margin: 5px;
}

.margin-sm {
    margin: 10px;
}

.margin {
    margin: 15px;
}

.margin-lg {
    margin: 20px;
}

.margin-xl {
    margin: 25px;
}

.margin-top-xs {
    margin-top: 5px;
}

.margin-top-sm {
    margin-top: 10px;
}

.margin-top {
    margin-top: 15px;
}

.margin-top-lg {
    margin-top: 20px;
}

.margin-top-xl {
    margin-top: 25px;
}

.margin-right-xs {
    margin-right: 5px;
}

.margin-right-sm {
    margin-right: 10px;
}

.margin-right {
    margin-right: 15px;
}

.margin-right-lg {
    margin-right: 20px;
}

.margin-right-xl {
    margin-right: 25px;
}

.margin-bottom-xs {
    margin-bottom: 5px;
}

.margin-bottom-sm {
    margin-bottom: 10px;
}

.margin-bottom {
    margin-bottom: 15px;
}

.margin-bottom-lg {
    margin-bottom: 20px;
}

.margin-bottom-xl {
    margin-bottom: 25px;
}

.margin-left-xs {
    margin-left: 5px;
}

.margin-left-sm {
    margin-left: 10px;
}

.margin-left {
    margin-left: 15px;
}

.margin-left-lg {
    margin-left: 20px;
}

.margin-left-xl {
    margin-left: 25px;
}

.margin-lr-xs {
    margin-left: 5px;
    margin-right: 5px;
}

.margin-lr-sm {
    margin-left: 10px;
    margin-right: 10px;
}

.margin-lr {
    margin-left: 15px;
    margin-right: 15px;
}

.margin-lr-lg {
    margin-left: 20px;
    margin-right: 20px;
}

.margin-lr-xl {
    margin-left: 25px;
    margin-right: 25px;
}

.margin-tb-xs {
    margin-top: 5px;
    margin-bottom: 5px;
}

.margin-tb-sm {
    margin-top: 10px;
    margin-bottom: 10px;
}

.margin-tb {
    margin-top: 15px;
    margin-bottom: 15px;
}

.margin-tb-lg {
    margin-top: 20px;
    margin-bottom: 20px;
}

.margin-tb-xl {
    margin-top: 25px;
    margin-bottom: 25px;
}

.padding-0 {
    padding: 0;
}

.padding-xs {
    padding: 5px;
}

.padding-sm {
    padding: 10px;
}

.padding {
    padding: 15px;
}

.padding-lg {
    padding: 20px;
}

.padding-xl {
    padding: 25px;
}

.padding-top-xs {
    padding-top: 5px;
}

.padding-top-sm {
    padding-top: 10px;
}

.padding-top {
    padding-top: 15px;
}

.padding-top-lg {
    padding-top: 20px;
}

.padding-top-xl {
    padding-top: 25px;
}

.padding-right-xs {
    padding-right: 5px;
}

.padding-right-sm {
    padding-right: 10px;
}

.padding-right {
    padding-right: 15px;
}

.padding-right-lg {
    padding-right: 20px;
}

.padding-right-xl {
    padding-right: 25px;
}

.padding-bottom-xs {
    padding-bottom: 5px;
}

.padding-bottom-sm {
    padding-bottom: 10px;
}

.padding-bottom {
    padding-bottom: 15px;
}

.padding-bottom-lg {
    padding-bottom: 20px;
}

.padding-bottom-xl {
    padding-bottom: 25px;
}

.padding-left-xs {
    padding-left: 5px;
}

.padding-left-sm {
    padding-left: 10px;
}

.padding-left {
    padding-left: 15px;
}

.padding-left-lg {
    padding-left: 20px;
}

.padding-left-xl {
    padding-left: 25px;
}

.padding-lr-xs {
    padding-left: 5px;
    padding-right: 5px;
}

.padding-lr-sm {
    padding-left: 10px;
    padding-right: 10px;
}

.padding-lr {
    padding-left: 15px;
    padding-right: 15px;
}

.padding-lr-lg {
    padding-left: 20px;
    padding-right: 20px;
}

.padding-lr-xl {
    padding-left: 25px;
    padding-right: 25px;
}

.padding-tb-xs {
    padding-top: 5px;
    padding-bottom: 5px;
}

.padding-tb-sm {
    padding-top: 10px;
    padding-bottom: 10px;
}

.padding-tb {
    padding-top: 15px;
    padding-bottom: 15px;
}

.padding-tb-lg {
    padding-top: 20px;
    padding-bottom: 20px;
}

.padding-tb-xl {
    padding-top: 25px;
    padding-bottom: 25px;
}

/* ==================背景==================== */
.line-red::after, .lines-red::after {
    border-color: #e54d42;
}

.line-orange::after, .lines-orange::after {
    border-color: #f37b1d;
}

.line-yellow::after, .lines-yellow::after {
    border-color: #fbbd08;
}

.line-olive::after, .lines-olive::after {
    border-color: #8dc63f;
}

.line-green::after, .lines-green::after {
    border-color: #39b54a;
}

.line-cyan::after, .lines-cyan::after {
    border-color: #1cbbb4;
}

.line-blue::after, .lines-blue::after {
    border-color: #0081ff;
}

.line-purple::after, .lines-purple::after {
    border-color: #6739b6;
}

.line-mauve::after, .lines-mauve::after {
    border-color: #9c26b0;
}

.line-pink::after, .lines-pink::after {
    border-color: #e03997;
}

.line-brown::after, .lines-brown::after {
    border-color: #a5673f;
}

.line-grey::after, .lines-grey::after {
    border-color: #8799a3;
}

.line-gray::after, .lines-gray::after {
    border-color: #aaaaaa;
}

.line-black::after, .lines-black::after {
    border-color: #333333;
}

.line-white::after, .lines-white::after {
    border-color: #ffffff;
}

.bg-red {
    background-color: #e54d42;
    color: #ffffff;
}

.bg-orange {
    background-color: #f37b1d;
    color: #ffffff;
}

.bg-yellow {
    background-color: #fbbd08;
    color: #333333;
}

.bg-olive {
    background-color: #8dc63f;
    color: #ffffff;
}

.bg-green {
    background-color: #39b54a;
    color: #ffffff;
}

.bg-cyan {
    background-color: #1cbbb4;
    color: #ffffff;
}

.bg-blue {
    background-color: #0081ff;
    color: #ffffff;
}

.bg-purple {
    background-color: #6739b6;
    color: #ffffff;
}

.bg-mauve {
    background-color: #9c26b0;
    color: #ffffff;
}

.bg-pink {
    background-color: #e03997;
    color: #ffffff;
}

.bg-brown {
    background-color: #a5673f;
    color: #ffffff;
}

.bg-grey {
    background-color: #8799a3;
    color: #ffffff;
}

.bg-gray {
    background-color: #f0f0f0;
    color: #333333;
}

.bg-black {
    background-color: #333333;
    color: #ffffff;
}

.bg-white {
    background-color: #ffffff;
    color: #333333;
}

.bg-shadeTop {
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
    color: #ffffff;
}

.bg-shadeBottom {
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
    color: #ffffff;
}

.bg-red.light {
    color: #e54d42;
    background-color: #fadbd9;
}

.bg-orange.light {
    color: #f37b1d;
    background-color: #fde6d2;
}

.bg-yellow.light {
    color: #fbbd08;
    background-color: #fef2ced2;
}

.bg-olive.light {
    color: #8dc63f;
    background-color: #e8f4d9;
}

.bg-green.light {
    color: #39b54a;
    background-color: #d7f0dbff;
}

.bg-cyan.light {
    color: #1cbbb4;
    background-color: #d2f1f0;
}

.bg-blue.light {
    color: #0081ff;
    background-color: #cce6ff;
}

.bg-purple.light {
    color: #6739b6;
    background-color: #e1d7f0;
}

.bg-mauve.light {
    color: #9c26b0;
    background-color: #ebd4ef;
}

.bg-pink.light {
    color: #e03997;
    background-color: #f9d7ea;
}

.bg-brown.light {
    color: #a5673f;
    background-color: #ede1d9;
}

.bg-grey.light {
    color: #8799a3;
    background-color: #e7ebed;
}

.bg-gradual-red {
    background-image: linear-gradient(45deg, #f43f3b, #ec008c);
    color: #ffffff;
}

.bg-gradual-orange {
    background-image: linear-gradient(45deg, #ff9700, #ed1c24);
    color: #ffffff;
}

.bg-gradual-green {
    background-image: linear-gradient(45deg, #39b54a, #8dc63f);
    color: #ffffff;
}

.bg-gradual-purple {
    background-image: linear-gradient(45deg, #9000ff, #5e00ff);
    color: #ffffff;
}

.bg-gradual-pink {
    background-image: linear-gradient(45deg, #ec008c, #6739b6);
    color: #ffffff;
}

.bg-gradual-blue {
    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
    color: #ffffff;
}

/* ==================文本==================== */
.text-xs {
    font-size: 10px;
}

.text-sm {
    font-size: 12.5px;
}

.text-df {
    font-size: 14px;
}

.text-lg {
    font-size: 16px;
}

.text-xl {
    font-size: 18px;
}

.text-xxl {
    font-size: 22px;
}

.text-sl {
    font-size: 40px;
}

.text-xsl {
    font-size: 60px;
}

.text-Abc {
    text-transform: Capitalize;
}

.text-ABC {
    text-transform: Uppercase;
}

.text-abc {
    text-transform: Lowercase;
}

.text-price::before {
    content: "¥";
    font-size: 80%;
    margin-right: 2px;
}

.text-cut {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-bold {
    font-weight: bold;
}

.text-center {
    text-align: center;
}

.text-content {
    line-height: 1.6;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-red, .line-red, .lines-red {
    color: #FA4B49;
}

.text-orange, .line-orange, .lines-orange {
    color: #FF5400;
}

.text-yellow, .line-yellow, .lines-yellow {
    color: #FF6A0C;
}

.text-olive, .line-olive, .lines-olive {
    color: #8dc63f;
}

.text-green, .line-green, .lines-green {
    color: #39b54a;
}

.text-cyan, .line-cyan, .lines-cyan {
    color: #1cbbb4;
}

.text-blue, .line-blue, .lines-blue {
    color: #0081ff;
}

.text-purple, .line-purple, .lines-purple {
    color: #6739b6;
}

.text-mauve, .line-mauve, .lines-mauve {
    color: #9c26b0;
}

.text-pink, .line-pink, .lines-pink {
    color: #F840B1;
}

.text-brown, .line-brown, .lines-brown {
    color: #a5673f;
}

.text-grey, .line-grey, .lines-grey {
    color: #8799a3;
}

.text-gray, .line-gray, .lines-gray {
    color: #aaaaaa;
}

.text-black, .line-black, .lines-black {
    color: #333333;
}

.text-white, .line-white, .lines-white {
    color: #ffffff;
}

/* 标准黑 */
.wanl-pip {
    color: #333333;
}

.wanl-black {
    color: black;
}

/* 灰色 */
.wanl-gray {
    color: #828282;
}

/* 深灰 */
.wanl-gray-dark {
    color: #666666;
}

/* 浅灰 */
.wanl-gray-light {
    color: #999999;
}

.wanl-orange {
    color: #ff6601;
}

.wanl-red {
    color: #ff243a;
}

/* 字体渐变 - 红色 */
.wanl-text-red {
    background-image: -webkit-linear-gradient(right, #f43f3b, #ec008c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 黄色 */
.wanl-text-yellow {
    background-image: -webkit-linear-gradient(right, #ff9700, #ffca00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 橙色 */
.wanl-text-orange {
    background-image: -webkit-linear-gradient(right, #ff9700, #ed1c24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 紫罗兰 */
.wanl-text-violet {
    background-image: -webkit-linear-gradient(right, #709cff, #9000ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 蓝色 */
.wanl-text-blue {
    background-image: -webkit-linear-gradient(right, #0081ff, #1cbbb4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 浅蓝色 */
.wanl-text-light-blue {
    background-image: -webkit-linear-gradient(right, #55c9fc, #0c79ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 粉色 */
.wanl-text-pink {
    background-image: -webkit-linear-gradient(right, #ec008c, #6739b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 绿色 */
.wanl-text-green {
    background-image: -webkit-linear-gradient(right, #39b54a, #8dc63f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 紫色 */
.wanl-text-purple {
    background-image: -webkit-linear-gradient(right, #9000ff, #5e00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 白灰 */
.wanl-text-white {
    background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 万联渐变背景色*//* 橘红色 */
.wanl-bg-redorange {
    background: #ff3d33;
    background-image: linear-gradient(90deg, #ff6333 0, #ff243a 97%);
    color: white;
}

.wanl-bg-redorange-light {
    background-image: linear-gradient(90deg, #ffc0ae 0, #ffa7b0 97%);
    color: white;
}

/* 透明 */
.wanl-bg-transparent {
    background-color: transparent;
    border-color: transparent;
}

/* 橙色 */
.wanl-bg-orange {
    color: white;
    background-image: linear-gradient(-90deg, #ff4950 0, #ff8123 100%);
}

/* 粉色 */
.wanl-bg-pink {
    color: white;
    background-image: linear-gradient(-90deg, #fa3b26 3%, #ff4d8a 96%);
}

/* 蓝色 */
.wanl-bg-blue {
    color: white;
    background-image: linear-gradient(-90deg, #2676fa 0, #23d7ff 100%);
}

/* ==================徽章==================== */
.cu-tag {
    font-size: 22px;
    vertical-align: middle;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0px 13px;
    height: 44px;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    white-space: nowrap;
}

.cu-tag:not([class*="bg"]):not([class*="line"]) {
    background-color: #f1f1f1;
}

.cu-tag[class*="line-"]::after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid currentColor;
    transform: scale(0.5);
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.cu-tag.radius[class*="line"]::after {
    border-radius: 11px;
}

.cu-tag.round[class*="line"]::after {
    border-radius: 1000px;
}

.cu-tag[class*="line-"]::after {
    border-radius: 0;
}

.cu-tag + .cu-tag {
    margin-left: 5px;
}

.cu-tag.sm {
    font-size: 10px;
    padding: 0px 6px;
    height: 16px;
}

.cu-capsule {
    display: inline-flex;
    vertical-align: middle;
}

.cu-capsule + .cu-capsule {
    margin-left: 5px;
}

.cu-capsule .cu-tag {
    margin: 0;
}

.cu-capsule .cu-tag[class*="line-"]:last-child::after {
    border-left: 0px solid transparent;
}

.cu-capsule .cu-tag[class*="line-"]:first-child::after {
    border-right: 0px solid transparent;
}

.cu-capsule.radius .cu-tag:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.cu-capsule.radius .cu-tag:last-child::after, .cu-capsule.radius .cu-tag[class*="line-"] {
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
}

.cu-capsule.round .cu-tag:first-child {
    border-top-left-radius: 200px;
    border-bottom-left-radius: 200px;
    text-indent: 2px;
}

.cu-capsule.round .cu-tag:last-child::after, .cu-capsule.round .cu-tag:last-child {
    border-top-right-radius: 200px;
    border-bottom-right-radius: 200px;
    text-indent: -2px;
}

.cu-tag.badge {
    border-radius: 200px;
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 10px;
    padding: 0px 5px;
    height: 14px;
    color: #ffffff;
}

.cu-tag.badge:not([class*="bg-"]) {
    background-color: #dd514c;
}

.cu-tag:empty:not([class*="wlIcon-"]) {
    padding: 0px;
    width: 13px;
    height: 13px;
    top: -2px;
    right: -2px;
}

.cu-tag[class*="wlIcon-"] {
    width: 31px;
    height: 31px;
    top: -2px;
    right: -2px;
}

/* UI附加 */
.cu-modal.bottom-modal .cu-dialog {
    border-radius: 10px 10px 0 0;
}

.margin-bj {
    margin: 12.5px;
}

.margin-top-bj {
    margin-top: 12.5px;
}

.margin-right-bj {
    margin-right: 12.5px;
}

.margin-bottom-bj {
    margin-bottom: 12.5px;
}

.margin-left-bj {
    margin-left: 12.5px;
}

.margin-lr-bj {
    margin-left: 12.5px;
    margin-right: 12.5px;
}

.margin-tb-bj {
    margin-top: 12.5px;
    margin-bottom: 12.5px;
}

.padding-bj {
    padding: 12.5px;
}

.padding-top-bj {
    padding-top: 12.5px;
}

.padding-right-bj {
    padding-right: 12.5px;
}

.padding-left-bj {
    padding-left: 12.5px;
}

.padding-lr-bj {
    padding-left: 12.5px;
    padding-right: 12.5px;
}

.padding-tb-bj {
    padding-top: 12.5px;
    padding-bottom: 12.5px;
}

.padding-bottom-bj {
    padding-bottom: 12.5px;
}

.text-dec {
    text-decoration: line-through;
}

.text-cut-2 {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.radius-bock {
    border-radius: 9px;
    overflow: hidden;
}

.bg-gradual-yellow {
    background-image: linear-gradient(to left, #ff9700, #ffca00);
    color: white;
}

.bg-white {
    color: #333333;
}

.bg-nav {
    background-color: #f9f9f9;
}

.bg-bgcolor {
    background-color: #f1f1f1;
}

/* grid 1-2-2布局 */
.grid.col-1-2-2 > div {
    width: 50%;
}

.grid.col-1-2-2 > div:nth-child(1) {
    width: 100%;
}

/* grid 1-1_2布局 */
.grid.col-1-1_2 > div {
    width: 50%;
}

.grid.col-1-1_2 > div:nth-child(1) {
    width: 100%;
}

.grid.col-1-1_2 > div:nth-child(2) {
    width: 50%;
}

.grid.col-1-1_2 > div:nth-child(3), .grid.col-1-1_2 > div:nth-child(4) {
    width: 25%;
}

/* grid 2-1_2布局 */
.grid.col-2-1_2 > div {
    width: 50%;
}

.grid.col-2-1_2 > div:nth-child(1), .grid.col-2-1_2 > div:nth-child(2), .grid.col-2-1_2 > div:nth-child(3) {
    width: 50%;
}

.grid.col-2-1_2 > div:nth-child(4), .grid.col-2-1_2 > div:nth-child(5) {
    width: 25%;
}

/* grid 2-2_1布局 */
.grid.col-2-2_1 > div {
    width: 50%;
}

.grid.col-2-2_1 > div:nth-child(1), .grid.col-2-2_1 > div:nth-child(2) {
    width: 50%;
}

.grid.col-2-2_1 > div:nth-child(3), .grid.col-2-2_1 > div:nth-child(4) {
    width: 25%;
}

/* grid 2-2-1_2布局 */
.grid.col-2-2-1_2 > div {
    width: 50%;
}

.grid.col-2-2-1_2 > div:nth-child(1), .grid.col-2-2-1_2 > div:nth-child(2), .grid.col-2-2-1_2 > div:nth-child(3), .grid.col-2-2-1_2 > div:nth-child(4), .grid.col-2-2-1_2 > div:nth-child(5) {
    width: 50%;
}

.grid.col-2-2-1_2 > div:nth-child(6), .grid.col-2-2-1_2 > div:nth-child(7) {
    width: 25%;
}

/* grid 2-4布局 */
.grid.col-2-4 > div {
    width: 50%;
}

.grid.col-2-4 > div:nth-child(3), .grid.col-2-4 > div:nth-child(4), .grid.col-2-4 > div:nth-child(5), .grid.col-2-4 > div:nth-child(6) {
    width: 25%;
}

/* grid 2-2-4布局 */
.grid.col-2-2-4 > div {
    width: 50%;
}

.grid.col-2-2-4 > div:nth-child(5), .grid.col-2-2-4 > div:nth-child(6), .grid.col-2-2-4 > div:nth-child(7), .grid.col-2-2-4 > div:nth-child(8) {
    width: 25%;
}
.grid.col-2_1_2 > div{
    width: 33.33333333333333%;
                }

/* ==================列表==================== */
.grayscale {
    filter: grayscale(1);
}


.cu-list + .cu-list {
    margin-top: 15px
}

.cu-list > .cu-item {
    transition: all .6s ease-in-out 0s;
    transform: translateX(0px)
}

.cu-list > .cu-item.move-cur {
    transform: translateX(-130px)
}

.cu-list > .cu-item .move {
    position: absolute;
    right: 0;
    display: flex;
    width: 130px;
    height: 100%;
    transform: translateX(100%)
}

.cu-list > .cu-item .move div {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center
}

.cu-list.menu-avatar {
    overflow: hidden;
}

.cu-list.menu-avatar > .cu-item {
    position: relative;
    display: flex;
    padding-right: 5px;
    height: 70px;
    background-color: #ffffff;
    justify-content: flex-end;
    align-items: center
}

.cu-list.menu-avatar > .cu-item > .cu-avatar {
    position: absolute;
    left: 15px
}

.cu-list.menu-avatar > .cu-item .flex .text-cut {
    max-width: 255px
}

.cu-list.menu-avatar > .cu-item .content {
    position: absolute;
    left: 78px;
    width: calc(100% - 48px - 30px - 60px - 10px);
    line-height: 1.6em;
}

.cu-list.menu-avatar > .cu-item .content.flex-sub {
    width: calc(100% - 48px - 30px - 10px);
}

.cu-list.menu-avatar > .cu-item .content > div:first-child {
    font-size: 15px;
    display: flex;
    align-items: center
}

.cu-list.menu-avatar > .cu-item .content .cu-tag.sm {
    display: inline-block;
    margin-left: 5px;
    height: 14px;
    font-size: 8px;
    line-height: 16px
}

.cu-list.menu-avatar > .cu-item .action {
    width: 50px;
    text-align: center
}

.cu-list.menu-avatar > .cu-item .action div + div {
    margin-top: 5px
}

.cu-list.menu-avatar.comment > .cu-item .content {
    position: relative;
    left: 0;
    width: auto;
    flex: 1;
}

.cu-list.menu-avatar.comment > .cu-item {
    padding: 15px 15px 15px 60px;
    height: auto
}

.cu-list.menu-avatar.comment .cu-avatar {
    align-self: flex-start
}

.cu-list.menu > .cu-item {
    position: relative;
    display: flex;
    padding: 0 15px;
    min-height: 50px;
    background-color: #ffffff;
    justify-content: space-between;
    align-items: center
}

.cu-list.menu > .cu-item:last-child:after {
    border: none
}

.cu-list.menu-avatar > .cu-item:after, .cu-list.menu > .cu-item:after {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    border-bottom: 1px solid #ddd;
    border-radius: inherit;
    content: " ";
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none
}

.cu-list.menu > .cu-item.grayscale {
    background-color: #f5f5f5
}

.cu-list.menu > .cu-item.cur {
    background-color: #fcf7e9
}

.cu-list.menu > .cu-item.arrow {
    padding-right: 45px
}

.cu-list.menu > .cu-item.arrow:before {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    display: block;
    margin: auto;
    width: 15px;
    height: 15px;
    color: #8799a3;
    content: "\e645";
    text-align: center;
    font-size: 15px;
    font-family: wlIcon;
    line-height: 15px
}

.cu-list.menu > .cu-item button.content {
    padding: 0;
    background-color: transparent;
    justify-content: flex-start
}

.cu-list.menu > .cu-item button.content:after {
    display: none
}

.cu-list.menu > .cu-item .cu-avatar-group .cu-avatar {
    border-color: #ffffff
}

.cu-list.menu > .cu-item .content > div:first-child {
    display: flex;
    align-items: center
}

.cu-list.menu > .cu-item .content > i[class*=wlIcon] {
    display: inline-block;
    margin-right: 5px;
    width: 1.6em;
    text-align: center
}

.cu-list.menu > .cu-item .content > img {
    display: inline-block;
    margin-right: 5px;
    width: 1.6em;
    height: 1.6em;
    vertical-align: middle
}

.cu-list.menu > .cu-item .content {
    font-size: 15px;
    line-height: 1.6em;
    flex: 1
}

.cu-list.menu > .cu-item .content .cu-tag.sm {
    display: inline-block;
    margin-left: 5px;
    height: 14px;
    font-size: 8px;
    line-height: 16px
}

.cu-list.menu > .cu-item .action .cu-tag:empty {
    right: 5px
}

.cu-list.menu {
    display: block;
    overflow: hidden
}

.cu-list.menu.sm-border > .cu-item:after {
    left: 15px;
    width: calc(200% - 60px)
}

.cu-list.grid > .cu-item {
    position: relative;
    display: flex;
    padding: 10px 0 15px;
    transition-duration: 0s;
    flex-direction: column
}

.cu-list.grid > .cu-item:after {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    border-right: 2px solid rgba(0, 0, 0, .1);
    border-bottom: 2px solid rgba(0, 0, 0, .1);
    border-radius: inherit;
    content: " ";
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none
}

/* .cu-list.grid>.cu-item text {display: block;margin-top: 5px;color: #888;font-size: 13px;line-height: 20px}.cu-list.grid>.cu-item [class*=wlIcon] {position: relative;display: block;margin-top: 10px;width: 100%;font-size: 24px}*/
.cu-list.grid > .cu-item .cu-tag {
    right: auto;
    left: 50%;
    margin-left: 10px
}

.cu-list.grid {
    text-align: center
}

.cu-list.grid.no-border > .cu-item {
    padding-top: 5px;
    padding-bottom: 10px
}

.cu-list.grid.no-border > .cu-item:after {
    border: none
}

.cu-list.grid.no-border {
    padding: 10px 5px
}

.cu-list.grid.col-3 > .cu-item:nth-child(3n):after, .cu-list.grid.col-4 > .cu-item:nth-child(4n):after, .cu-list.grid.col-5 > .cu-item:nth-child(5n):after {
    border-right-width: 0
}

.cu-list.card-menu {
    overflow: hidden;
    margin-right: 15px;
    margin-left: 15px;
    border-radius: 10px
}
.col-2_1_2 > div:nth-child(2){
    align-items: center;
    flex-direction: inherit !important;
}